grid
  display: grid
  grid-template-columns: repeat(12, 1fr)
  --grid-e: 1

grid>cell, grid>row
  display: block
  appearance: none

grid>cell[span], grid>row
  grid-column-end: span var(--grid-e)

grid>cell[start]
  grid-column-start: var(--grid-b)

@for $i from 1 through 12
  grid>cell[span="#{$i}"]
    --grid-e: #{$i}

grid>row
  --grid-e: 12

@for $i from 1 through 12
  grid>cell[start="#{$i}"]
    --grid-b: #{$i}

@media only screen and (max-width: 600px)
  @for $i from 1 through 12
    grid>cell[m-span="#{$i}"]
      --grid-e: #{$i}

  @for $i from 1 through 12
    grid>cell[m-start="#{$i}"]
      --grid-b: #{$i}

@media only screen and (max-width: 1200px)
  @for $i from 1 through 12
    grid>cell[t-span="#{$i}"]
      --grid-e: #{$i}

  @for $i from 1 through 12
    grid>cell[t-start="#{$i}"]
      --grid-b: #{$i}
